<template>
  <div class="exam-container">
    <div class="exam-header">
      <a-input-search
        v-model:value="searchText"
        placeholder="请输入考试名称"
        style="width: 300px"
        @search="onSearch"
      />
    </div>
    
    <div class="exam-list">
      <a-row :gutter="[16, 16]">
        <a-col :span="8" v-for="exam in examList" :key="exam.id">
          <a-card 
            :hoverable="exam.status === 'graded'"
            @click="exam.status === 'graded' && goToScoreDetail(exam)"
            :class="['exam-card', { 'disabled': exam.status === 'grading' }]"
          >
            <template #cover>
              <img :src="exam.cover" alt="exam cover" />
            </template>
            <a-card-meta :title="exam.title">
              <template #description>
                <p>考试时长：{{ exam.duration }}分钟</p>
                <p>开始时间：{{ exam.startTime }}</p>
                <p>结束时间：{{ exam.endTime }}</p>
                <p>
                  <span class="status-tag" :class="{ 'grading': exam.status === 'grading' }">
                    {{ exam.status === 'grading' ? '阅卷中' : '已阅卷' }}
                  </span>
                </p>
              </template>
            </a-card-meta>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <div class="pagination-container">
      <a-pagination
        v-model:current="pagination.current"
        v-model:pageSize="pagination.pageSize"
        :total="pagination.total"
        :show-total="(total) => `共 ${total} 条`"
        :show-size-changer="true"
        @change="handlePageChange"
        @showSizeChange="handlePageSizeChange"
      />
    </div>

    <a-modal
      v-model:visible="scoreModalVisible"
      title="考试成绩"
      :footer="null"
      width="400px"
    >
      <div class="score-detail">
        <div class="status-tag" :class="{ 'fail': examScore < 60 }">
          {{ examScore >= 60 ? '通过' : '不通过' }}
        </div>
        
        <div class="score-number">
          {{ examScore }}<span class="unit">分</span>
        </div>
        
        <div class="score-title">考试成绩</div>
        
        <div class="score-stats">
          <div class="stat-item">
            <div class="number">{{ examStats.questionCount }}</div>
            <div class="label">题数</div>
          </div>
          <div class="stat-item">
            <div class="number">{{ examStats.totalScore }}</div>
            <div class="label">总分</div>
          </div>
          <div class="stat-item">
            <div class="number">{{ examStats.passScore }}</div>
            <div class="label">及格分</div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const searchText = ref('')

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 6,
  total: 0,
})

// 模拟考试成绩数据
const examList = ref([
  {
    id: 1,
    title: '��息安全考试',
    duration: 120,
    startTime: '2024-03-15 15:00:00',
    endTime: '2024-03-15 17:00:00',
    status: 'graded', // 已阅卷
    score: 85, // 保留score用于弹窗显示
    cover: 'https://img.freepik.com/free-vector/cyber-security-concept_23-2148532223.jpg'
  },
  {
    id: 2,
    title: '软件工程考试',
    duration: 90,
    startTime: '2024-03-16 09:00:00',
    endTime: '2024-03-16 10:30:00',
    status: 'grading', // 阅卷中
    score: 92,
    cover: 'https://img.freepik.com/free-vector/cyber-security-concept_23-2148532223.jpg'
  },
  // ... 可以添加更多考试数据
])

// 获取考试成绩列表
const fetchScoreList = async () => {
  try {
    // 这里模拟API调用
    // const response = await api.getScoreList({
    //   page: pagination.current,
    //   pageSize: pagination.pageSize,
    //   keyword: searchText.value
    // })
    
    pagination.total = 25
  } catch (error) {
    console.error('获取成绩列表失败:', error)
  }
}

// 页码改变
const handlePageChange = (page: number, pageSize: number) => {
  pagination.current = page
  pagination.pageSize = pageSize
  fetchScoreList()
}

// 每页条数改变
const handlePageSizeChange = (current: number, size: number) => {
  pagination.current = 1
  pagination.pageSize = size
  fetchScoreList()
}

const onSearch = (value: string) => {
  pagination.current = 1
  fetchScoreList()
}

const scoreModalVisible = ref(false)
const examScore = ref(0)
const examStats = ref({
  questionCount: 0,
  totalScore: 0,
  passScore: 0
})

// 修改点击事件处理
const goToScoreDetail = (exam: any) => {
  // 只有已阅卷的才显示成绩
  if (exam.status === 'graded') {
    examScore.value = exam.score
    examStats.value = {
      questionCount: 15,
      totalScore: 100,
      passScore: 60
    }
    scoreModalVisible.value = true
  }
}

onMounted(() => {
  fetchScoreList()
})
</script>

<style lang="scss" scoped>
.exam-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;

  .exam-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 24px;
  }

  .exam-list {
    margin-top: 24px;

    .exam-card {
      cursor: pointer;

      &.disabled {
        cursor: not-allowed;
        
        &:hover {
          box-shadow: none;
        }
      }

      :deep(.ant-card-cover) img {
        height: 140px;
        object-fit: cover;
      }

      :deep(.ant-card-body) {
        padding: 14px;

        .ant-card-meta-title {
          font-size: 14px;
          margin-bottom: 8px;
        }

        .ant-card-meta-description {
          font-size: 12px;

          p {
            margin-bottom: 4px;
            line-height: 1.5;
          }

          .status-tag {
            display: inline-block;
            padding: 2px 12px;
            border-radius: 12px;
            background-color: #52c41a;
            color: white;
            font-size: 14px;

            &.grading {
              background-color: #faad14;
            }
          }
        }
      }
    }
  }

  .pagination-container {
    margin-top: 24px;
    text-align: right;
  }
}

.score-detail {
  text-align: center;
  padding: 20px 0;

  .status-tag {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 12px;
    background-color: #52c41a;
    color: white;
    font-size: 14px;
    margin-bottom: 20px;

    &.fail {
      background-color: #ff4d4f;
    }
  }

  .score-number {
    font-size: 48px;
    font-weight: bold;
    color: #1890ff;
    margin-bottom: 8px;

    .unit {
      font-size: 16px;
      margin-left: 4px;
    }
  }

  .score-title {
    font-size: 16px;
    color: #666;
    margin-bottom: 24px;
  }

  .score-stats {
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #f0f0f0;
    padding-top: 24px;

    .stat-item {
      text-align: center;

      .number {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        margin-bottom: 4px;
      }

      .label {
        font-size: 14px;
        color: #666;
      }
    }
  }
}
</style> 